<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="renderer" content="webkit" />

    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Expires" content="-1"/>

    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <title>前端笔记_jackdizhu</title>
    <link rel="shortcut icon" href="/favicon.ico"/>

    <style type="text/css" id="style">
      pre{
        width: 100%;
        white-space: pre-wrap;
      }
    </style>

</head>
<body>
    <header>
        jackdizhu 前端笔记
    </header>
    <div class="nav">
        <h5><span>标题导航</span></h5>
        <div class="clearfix">
            <p><a href="#RegExp">常用正则</a></p>
            <p><a href="#H5_css">H5_css</a></p>
            <p><a href="#PC_css">PC_css</a></p>
            <p><a href="#javascript">javascript</a></p>
            <p><a href="#IE_Notes">IE 注释</a></p>
            <p><a href="#Browser">浏览器</a></p>
            <p><a href="#sublime_config">sublime配置</a></p>
            <p><a href="#PHP">PHP</a></p>
        </div>
    </div>
    <div class="content">


        <h5><a name="RegExp" id="RegExp"></a><span>常用正则</span></h5>
        <div class="clearfix">
            <pre>
            // 用户名验证
            /^[a-zA-Z][a-zA-Z0-9]{5,19}$/
            //密码验证
            /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,20}$
            // 手机号码
            /^1[3-8]\d{9}$/
            //短信验证码验证
            /^[a-zA-Z0-9]{6}$/
            //邮箱 验证
            /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

            /\^|\.|\*|\?|\!|\/|\\|\$|\#|\&|\||,|\[|\]|\{|\}|\(|\)|\-|\+|\=|\`|\'|\"/g  特殊字符过滤
            /[^\dA-Za-z\u4e00-\u9fa5]/ 非 昵称
            /^1[3-8]+\d{9}$/ 手机号码
            /^[0-9]{6}$/ 邮编
            /^[\u4e00-\u9fa5]{2,4}$/ 姓名
            /[^\dA-Za-z\u4e00-\u9fa5]/ 非 详细地址
            /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/ 身份证号
            /^(\d{16}|\d{19})$/ 银行卡号
            /^[a-zA-Z][a-zA-Z0-9_]{2,9}$/ 用户名
            /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,20}$/ 密码
            /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ 邮箱

            常用的数字正则（严格匹配）
            /^[1-9]\d*$/  匹配正整数
            /^-[1-9]\d*$/ 匹配负整数
            /^-?[1-9]\d*$/    匹配整数
            /^[1-9]\d*|0$/    匹配非负整数（正整数 + 0）
            /^-[1-9]\d*|0$/   匹配非正整数（负整数 + 0）
            /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/  匹配正浮点数
            /^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/   匹配负浮点数
            /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/     匹配浮点数
            /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/ 匹配非负浮点数（正浮点数 + 0）
            /^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/    匹配非正浮点数（负浮点数 + 0）

            常用字符串正则
            /^[A-Za-z]+$/ 匹配由26个英文字母组成的字符串    或 /^[a-z]+$/i
            /^[A-Z]+$/    匹配由26个英文字母的大写组成的字符串
            /^[a-z]+$/    匹配由26个英文字母的小写组成的字符串
            /^[A-Za-z0-9]+$/  匹配由数字和26个英文字母组成的字符串 注意\w包含下划线_
            /^\w+$/   匹配由数字、26个英文字母或者下划线组成的字符串

            匹配HTML标记的正则表达式
            /^<([a-z]+)\s*\/?> (?:<\/\1>)?$/i

            去首尾空白字符
            /^\s*|\s*$/g

            匹配Email地址的正则表达式
            /^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-zA-Z0-9]+)*)+\.[a-z]{2,6})$/i

            匹配帐号是否合法
            /\w{4,16}/

            匹配国内电话号码
            网上流传的版本很好用：
            /\d{3}-\d{8}|\d{4}-\d{7}/

            匹配腾讯QQ号
            /[1-9][0-9]{4,}/

            匹配中国邮政编码
            /[1-9]\d{5}(?!\d)/

            匹配身份证
            function validateIdCard(obj){
               var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
                var iSum = 0;
               //var info = "";
               var strIDno = obj;
               var idCardLength = strIDno.length;
               if(!/^\d{17}(\d|x)$/i.test(strIDno)&&!/^\d{15}$/i.test(strIDno))
                      return 1; //非法身份证号

               if(aCity[parseInt(strIDno.substr(0,2))]==null)
               return 2;// 非法地区

                // 15位身份证转换为18位
               if (idCardLength==15)
               {
                  sBirthday = "19" + strIDno.substr(6,2) + "-" + Number(strIDno.substr(8,2)) + "-" + Number(strIDno.substr(10,2));
                var d = new Date(sBirthday.replace(/-/g,"/"))
                var dd = d.getFullYear().toString() + "-" + (d.getMonth()+1) + "-" + d.getDate();
                if(sBirthday != dd)
                              return 3; //非法生日
                            strIDno=strIDno.substring(0,6)+"19"+strIDno.substring(6,15);
                            strIDno=strIDno+GetVerifyBit(strIDno);
               }

                     // 判断是否大于2078年，小于1900年
                     var year =strIDno.substring(6,10);
                     if (year&lt;1900 || year&gt;2078 )
                         return 3;//非法生日

                  //18位身份证处理

                 //在后面的运算中x相当于数字10,所以转换成a
                  strIDno = strIDno.replace(/x$/i,"a");

                sBirthday=strIDno.substr(6,4)+"-"+Number(strIDno.substr(10,2))+"-"+Number(strIDno.substr(12,2));
                var d = new Date(sBirthday.replace(/-/g,"/"))
                if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))
                              return 3; //非法生日
                  // 身份证编码规范验证
                for(var i = 17;i>=0;i --)
                 iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 - i),11);
                if(iSum%11!=1)
                              return 1;// 非法身份证号

                 // 判断是否屏蔽身份证
                  var words = new Array();
                  words = new Array("11111119111111111","12121219121212121");

                  for(var k=0;k&lt;words.length;k++){
                      if (strIDno.indexOf(words[k])!=-1){
                          return 1;
                      }
                  }

               return 0;
            }
            参考资料：
            http://baike.baidu.com/view/118340.htm#1

            匹配IP地址
            /^(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])$/
            </pre>
        </div>

        <h5><a name="H5_css" id="H5_css"></a><span>H5 css</span></h5>
        <div class="clearfix">
            <pre>
            // SUI 代码
            @baseWidth: 375px;
            @baseFont: 20px;

            html {
              font-size: @baseFont;  //默认当做320px宽度的屏幕来处理
            }
            // 手机端 字体设置 兼容 win mac
            body {
                font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
            }

            @bps: 400px, 414px, 480px;

            .loop(@i: 1) when (@i <= length(@bps)) {  //注意less数组是从1开始的
              @bp: extract(@bps, @i);
              @font: @bp/@baseWidth*@baseFont;
              @media only screen and (min-width: @bp){
                html {
                  font-size: @font !important;
                }
              }
              .loop((@i + 1));
            };
            .loop;
            * {
              box-sizing: border-box;
              // 禁止 iPhone 链接点击灰色背景
              -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
              // 禁止 iPhone 链接点击显示系统菜单
              -webkit-touch-callout: none;
            }
            html {
              font-family: sans-serif;
              // 禁止手机端自动调整文字大小
              -ms-text-size-adjust: 100%;
              -webkit-text-size-adjust: 100%;
            }
            .clearfix:before,
            .clearfix:after {
              content: " ";
              display: table;
            }
            .clearfix:after {
              clear: both;
            }
            .content{
              // 开启硬件加速
              -webkit-overflow-scrolling: touch;
            }
            button::-moz-focus-inner,
            input::-moz-focus-inner {
              border: 0;
              padding: 0;
            }
            input {
              line-height: normal;
            }

            html,body{
              background: @bodyBg;
              min-width: @bodyW;
              overflow: auto;
              word-break: @wordBreak;
            }
            *{
              box-sizing: @boxSizing;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            a,
            ul,
            ol,
            dl,
            dt,
            dd,
            li,
            body,
            form,
            input,
            textarea,
            select,
            button,
            img,
            area,
            cite,
            strong,
            em,
            table,
            td,
            th,
            div{
                outline: none;
                padding: 0;
                margin: 0;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-size: @HFontSize;
            }
            small{
                font-size: @SmallFontSize;
            }
            img,
            table,
            td,
            th {
                border-collapse: collapse;
                border: none;
            }
            ul,
            ol {
                list-style-type: none;
            }
            input:-webkit-autofill {
              -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
            }
            input,button{
              -webkit-appearance: none;
            }
            input[type='checkbox'],
            input[type='radio'],
            input[type='button'],
            button{
              cursor: pointer;
            }
            a {
                font-size: inherit;
                color: inherit;
                text-decoration: none;
            }
            img[src=""]{
                display: none;
            }
            body, button, input, select, textarea{
              font-size: @fontSize;
              // 通过 js 兼容 win mac
              // font-family: @WindowsFontFamily;
              // "Futura","PingHei","PingFang SC","Helvetica Neue","Helvetica",Arial,"Tahoma",Microsoft YaHei;
              line-height: @lineHeight;
              -moz-osx-font-smoothing: grayscale;
              -webkit-font-smoothing: antialiased;
            }

            head,script{
              height: 0;
              display: none;
            }
            html.overflowHidden{
              height: 100%;
              body{
                height: 100%;
                overflow: hidden;
              }
            }

            @dialogMask: rgba(0,0,0,0.35);
            // layer 弹框背景色
            .layui-layer-shade{
              background: @dialogMask !important;
            }
            //强制多行显示
            word-break: break-all;

            // 未知宽高 上下 左右居中
            .CenCenter(){
                left: 50%;
                top: 50%;
                -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0);
            }
            // leftPage 左侧 列表
            .leftPageUl(){
                -webkit-flex-direction: column;
                flex-direction: column;
                -webkit-flex-flow: column;
                flex-flow: column;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                li:last-child{
                    height: auto;
                    width: 100%;
                    -webkit-box-pack: justify;
                    -webkit-box-flex:1;
                    flex: 1;
                }
            }
            // 设置 input 背景色
            .inputBg(@a){
                background-color: @a;
                -webkit-tap-highlight-color: @a;

                &:-webkit-autofill {
                    -webkit-box-shadow: 0 0 0px 1000px @a inset !important;
                }
            }
            //  设置 input 提示文字颜色
            .placeholder(@a){
                  &::-webkit-input-placeholder {
                        color: @a;
                  }
                  &:-webkit-input-placeholder {
                        color: @a;
                  }
                  &:-moz-placeholder {
                        color: @a;
                  }
                  &::-moz-placeholder {
                        color: @a;
                  }
                  &:-ms-input-placeholder {
                        color: @a;
                  }
            }
            // 设置文字小于12px 解决方案
            .fontSize(@b){
                font-size: .6rem;
                transform: scale(@b/12);
                -ms-transform: scale(@b/12);
                -moz-transform: scale(@b/12);
                -webkit-transform: scale(@b/12);
                -o-transform: scale(@b/12);
            }
            // 设置 下边框
            .borderAfterBot(@a){
                & {
                    content:' ';
                    position: absolute;
                    left: 0;
                    top: auto;
                    bottom: 0;
                    right: auto;
                    height: 1px;
                    width: 100%;
                    background-color: @a;
                    display: block;
                    z-index: 15;
                    -webkit-transform-origin: 50% 0;
                    transform-origin: 50% 0
                }
                @media only screen and (-webkit-min-device-pixel-ratio:2) {
                    & {
                        -webkit-transform: scaleY(.5);
                        transform: scaleY(.5)
                    }
                }
                @media only screen and (-webkit-min-device-pixel-ratio:3) {
                    & {
                        -webkit-transform: scaleY(.33);
                        transform: scaleY(.33)
                    }
                }
            }
            // 设置 上边框
            .borderBeforeTop(@a){
                & {
                    content: ' ';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: auto;
                    right: auto;
                    height: 1px;
                    width: 100%;
                    background-color: @a;
                    display: block;
                    z-index: 15;
                    -webkit-transform-origin: 50% 0;
                    transform-origin: 50% 0
                }
                @media only screen and (-webkit-min-device-pixel-ratio:2) {
                    & {
                        -webkit-transform: scaleY(.5);
                        transform: scaleY(.5)
                    }
                }
                @media only screen and (-webkit-min-device-pixel-ratio:3) {
                    & {
                        -webkit-transform: scaleY(.33);
                        transform: scaleY(.33)
                    }
                }
            }
            // 设置 左边框
            .borderBeforeLeft(@a){
                & {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: auto;
                    width: 1px;
                    height: 100%;
                    background-color: @a;
                    display: block;
                    z-index: 15;
                    -webkit-transform-origin: 0 50%;
                    transform-origin: 0 50%
                }
                @media only screen and (-webkit-min-device-pixel-ratio:2) {
                    & {
                        -webkit-transform: scaleX(.5);
                        transform: scaleX(.5)
                    }
                }
                @media only screen and (-webkit-min-device-pixel-ratio:3) {
                    & {
                        -webkit-transform: scaleX(.33);
                        transform: scaleX(.33)
                    }
                }
            }
            // 设置 右边框
            .borderAfterRight(@a){
                & {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    left: auto;
                    width: 1px;
                    height: 100%;
                    background-color: @a;
                    display: block;
                    z-index: 15;
                    -webkit-transform-origin: 0 50%;
                    transform-origin: 0 50%
                }
                @media only screen and (-webkit-min-device-pixel-ratio:2) {
                    & {
                        -webkit-transform: scaleX(.5);
                        transform: scaleX(.5)
                    }
                }
                @media only screen and (-webkit-min-device-pixel-ratio:3) {
                    & {
                        -webkit-transform: scaleX(.33);
                        transform: scaleX(.33)
                    }
                }
            }
            // 单行文字超出隐藏 显示...
            .oneLineEllipsis{
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align: middle;
            }
            // 两行文字超出隐藏 显示...
            .twolineEllipsis{
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            // 字体两端对齐公共样式
            .textJustify{
                display: inline-block;
                float: left;
                height:100%;
                -webkit-text-align-last:justify;
                text-align-last:justify;
                text-justify:distribute-all-lines;
                text-align:justify;
            }
            .textJustify:after{
                display:inline-block;
                overflow:hidden;
                width:100%;
                height:0;
                content:'';
                vertical-align:top;
            }
            // items 左右居中上下底部显示
            .displayFlex_cenBot(){
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;

                -webkit-box-align: end;
                -webkit-align-items: flex-end;
                align-items: flex-end;
            }
            // items 左右居中上下居中显示
            .displayFlex(){
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
            // items 单行 两端对齐
            .displayFlex_between(){
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: justify;
                box-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
            // 阴影
            .box-shadow(){
                -webkit-box-shadow:.1rem .1rem .2rem rgba(0, 0, 0, .35);
                     -moz-box-shadow:.1rem .1rem .2rem rgba(0, 0, 0, .35);
                          box-shadow:.1rem .1rem .2rem rgba(0, 0, 0, .35);
            }
            // items 左右居中上下底部显示
            .displayFlex_cenBot{
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;

                -webkit-box-align: end;
                -webkit-align-items: flex-end;
                align-items: flex-end;
            }
            // items 左右居中上下居中显示
            .displayFlex{
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
            // item 之间留有间距
            .displayFlexBetween{
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: space-between;
                justify-content: space-between;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
            // item 前后留有间距
            .displayFlexAround{
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: space-around;
                justify-content: space-around;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
            // item 上下排列 平均分布
            .displayFlexStretch{
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                align-items: stretch;
                flex-direction: column;
                justify-content: space-between;
                flex-wrap: nowrap;
                -webkit-box-orient:vertical;
                -webkit-box-direction:normal;
                box-orient:vertical;
                box-direction:normal;
            }
            // 站位容器 伸缩盒子
            .itemDisplayFlex{
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -ms-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
            // 公共动画样式
            // 定义 从上进入 动画
            @-webkit-keyframes pageFromTopToCenter {
                from {
                    -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
                    opacity: .9
                }
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
            }
            @keyframes pageFromTopToCenter {
                from {
                    -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
                    opacity: .9
                }
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
            }
            // 定义 从上离开 动画
            @-webkit-keyframes pageFromCenterToTop {
                from {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
                to {
                    -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
                    opacity: .9
                }
            }
            @keyframes pageFromCenterToTop {
                from {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
                to {
                    -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
                    opacity: .9
                }
            }
            // 定义 从下进入 动画
            @-webkit-keyframes pageFromBotToCenter {
                from {
                    -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
                    opacity: .9
                }
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
            }
            @keyframes pageFromBotToCenter {
                from {
                    -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
                    opacity: .9
                }
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
            }
            // 定义 从下离开 动画
            @-webkit-keyframes pageFromCenterToBot {
                from {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
                to {
                    -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
                    opacity: .9
                }
            }
            @keyframes pageFromCenterToBot {
                from {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
                to {
                    -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
                    opacity: .9
                }
            }
            // 定义 从中间进入 动画
            @-webkit-keyframes pageFromCenToCenter {
                from {
                    left: 50%;
                    top: 50%;
                    width: 10%;
                    height: 10%;
                    -webkit-transform: translate3d(-50%, -50%, 0);
                    transform: translate3d(-50%, -50%, 0);
                    opacity: 0
                }
                to {
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
            }
            @keyframes pageFromCenToCenter {
                from {
                    left: 50%;
                    top: 50%;
                    width: 10%;
                    height: 10%;
                    -webkit-transform: translate3d(-50%, -50%, 0);
                    transform: translate3d(-50%, -50%, 0);
                    opacity: 0
                }
                to {
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
            }
            // 定义 从中间离开 动画
            @-webkit-keyframes pageFromCenterToCen {
                from {
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
                to {
                    left: 50%;
                    top: 50%;
                    width: 10%;
                    height: 10%;
                    -webkit-transform: translate3d(-50%, -50%, 0);
                    transform: translate3d(-50%, -50%, 0);
                    opacity: 0
                }
            }
            @keyframes pageFromCenterToCen {
                from {
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1
                }
                to {
                    left: 50%;
                    top: 50%;
                    width: 10%;
                    height: 10%;
                    -webkit-transform: translate3d(-50%, -50%, 0);
                    transform: translate3d(-50%, -50%, 0);
                    opacity: 0
                }
            }


            // RightToCenter 动画 从右进入
            .popup.modal-in.RightToCenter{
                -webkit-animation: pageFromRightToCenter .4s forwards;
                animation: pageFromRightToCenter .4s forwards;
            }
            // LeftToCenter 动画 从左进入
            .popup.modal-in.LeftToCenter{
                -webkit-animation: pageFromLeftToCenter .4s forwards;
                animation: pageFromLeftToCenter .4s forwards
            }
            // LeftToCenter 动画 从上进入
            .TopToCenter,
            .popup.modal-in.TopToCenter{
                -webkit-animation: pageFromTopToCenter .4s forwards;
                animation: pageFromTopToCenter .4s forwards
            }
            // LeftToCenter 动画 从下进入
            .page.BotToCenter,
            .content.BotToCenter,
            .popup.modal-in.BotToCenter{
                -webkit-animation: pageFromBotToCenter .4s forwards;
                animation: pageFromBotToCenter .4s forwards
            }
            // LeftToCenter 动画 从中间进入
            .popup.modal-in.CenToCenter{
                -webkit-animation: pageFromCenToCenter .4s forwards;
                animation: pageFromCenToCenter .4s forwards
            }
            // CenterToRight 动画 从右离开
            .popup.modal-out.RightToCenter,
            .popup.modal-out.CenterToRight{
                -webkit-animation: pageFromCenterToRight .4s forwards;
                animation: pageFromCenterToRight .4s forwards;
            }
            // CenterToLeft 动画 从左离开
            .popup.modal-out.LeftToCenter,
            .popup.modal-out.CenterToLeft{
                -webkit-animation: pageFromCenterToLeft .4s forwards;
                animation: pageFromCenterToLeft .4s forwards
            }
            // CenterToRight 动画 从下离开
            .content.CenterToBot,
            .popup.modal-out.BotToCenter,
            .popup.modal-out.CenterToBot{
                -webkit-animation: pageFromCenterToBot .4s forwards;
                animation: pageFromCenterToBot .4s forwards;
            }
            // CenterToLeft 动画 从上离开
            .page.CenterToTop,
            .content.CenterToTop,
            .popup.modal-out.TopToCenter,
            .popup.modal-out.CenterToTop{
                -webkit-animation: pageFromCenterToTop .4s forwards;
                animation: pageFromCenterToTop .4s forwards
            }
            // CenterToLeft 动画 从中间离开
            .popup.modal-out.CenToCenter,
            .popup.modal-out.CenterToCen{
                -webkit-animation: pageFromCenterToCen .4s forwards;
                animation: pageFromCenterToCen .4s forwards
            }
            </pre>
        </div>

        <h5><a name="PC_css" id="PC_css"></a><span>PC css</span></h5>
        <div class="clearfix">
            <pre>
            // web 自定义字体应用
            @iconFontTest: "iconFontTest";
            @font-face {
                font-family: 'iconFontTest';
                src: url('../font/iconfont.svg') format('svg');
            }
            .iconFontTest{
                font-family: @iconFontTest;
            }

            //网站主题 黑白色快速设置
            html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
            /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
            select::-ms-expand {
              display: none;
            }
            .borderBox{
                /*使用百分比宽度 像素边距时 防止超出边界 IE怪异模式*/
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -o-box-sizing: border-box;
                -ms-box-sizing: border-box;
                box-sizing: border-box;
            }

            html{
              font-size: 62.5%;
              width: 100%;
              height: 100%;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              -o-box-sizing: border-box;
              -ms-box-sizing: border-box;
              box-sizing: border-box;
            }
            *, *:before, *:after {
              -webkit-box-sizing: inherit;
              -moz-box-sizing: inherit;
              box-sizing: inherit;
            }
            html body{
              width: 100%;
              height: 100%;
              /*字体抗锯齿*/
            }
            a,button,input{
              -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
              /*重置inphone input[type="submit"] ui*/
              -webkit-appearance: none;
            }
            /*type="file" safail兼容*/
            input[type="file"].opacity0{
                position: absolute;
                z-index: -10;
                filter:alpha(opacity=0);
                -moz-opacity:0;
                opacity:0;
            }
            body, button, input, select, textarea{
              font:1.4rem/150% "微软雅黑","Microsoft YaHei",Arial,Verdana,"\5b8b\4f53";

              font-family: Hiragino Sans GB,"Microsoft YaHei",STHeiti,Arial,sans-serif;
              font: 12px/1.5 'PingHei','PingFang SC','Helvetica Neue','Helvetica',"微软雅黑","Microsoft YaHei","Tahoma",Arial,"宋体";

              font-family: sans-serif;
              /*font-family: sans-serif;*/
              /*font-family:-apple-system;*/
              /*font-family:Hiragino Sans GB;*/
              /*font-family:WenQuanYi Micro Hei;*/
              /*font-family:sans-serif;*/

              /*font-family:Avenir Next;*/
              /*font-family:Avenir;*/
              /*font-family:Lucida Grande;*/
              /*font-family:Calibri;*/
              /*font-family:Trebuchet MS;*/
              /*font-family:Helvetica;*/
              /*font-family:Arial;*/
              /*font-family:PingFang SC;*/
              /*font-family:STHeiti;*/
              /*font-family:Microsoft Jhenghei;*/
              /*font-family:Nanum Gothic;*/

              -moz-osx-font-smoothing: grayscale;
              -webkit-font-smoothing: antialiased;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            ul,
            ol,
            dl,
            dt,
            dd,
            li,
            html,
            body,
            form,
            input,
            button,
            img,
            area,
            cite,
            strong,
            big,
            small,
            em,
            table,
            td,
            th {
              padding: 0;
              margin: 0;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              font-size: 14px;
              font-weight: 400;
            }
            img,
            table,
            td,
            th {
              border-collapse: collapse;
              border: 0;
            }
            img[src=""]{
                display: none;
            }
            input,button,select,textarea{outline:none}
            ul,
            ol {
              list-style-type: none;
            }
            a {
              color: #333;
              text-decoration: none;
            }
            a[href]{
              z-index: 1;
              /*处理ie 下图片 与 A 层级问题*/
              background:url(about:blank);
            }
            a:link{}
            a:visited{}
            a:hover{}
            a:active{outline: none;}
            i{font-style: normal;}
            /*斜体字*/
            .XieTi{ font-style:italic; }
            /*倾斜文字*/
            .XieTi{ font-style:oblique; }
            .floatL {
              float:left;
            }
            .floatR {
              float:right;
            }
            .clearfix{
              overflow:hidden;_zoom:1;
            }
            .bootclearfix {
              *zoom: 1;
            }
            .bootclearfix:before,
            .bootclearfix:after {
              display: table;
              line-height: 0;
              content: "";
            }
            .bootclearfix:after {
              clear: both;
            }
            .textRight{
              text-align: right;
            }
            .textCenter{
              text-align: center;
            }
            .textLeft{
              text-align: left;
            }
            .colorRed{
              color: #ff4c4c;
            }
            .colorGray{
              color: #646464;
            }

            .ComBoxShadow{
              -webkit-box-shadow:2px 2px 1px rgba(204, 198, 198,0.3);
              -moz-box-shadow:2px 2px 1px rgba(204, 198, 198,0.3);
              box-shadow:2px 2px 1px rgba(204, 198, 198,0.3);
            }
            table td{
                /*防止文字过长破坏table结构*/
                word-break: break-all;
            }
            //强制多行显示
            word-break: break-all;
            //手机端 文字两端对齐 ( 文字间必须加空格 )   word-break: break-all;
            .TextJustify{
              -moz-text-align-last:justify;/*ff*/
              -webkit-text-align-last:justify;/*chrome 20+*/
              text-align-last:justify;/* ie9*/
              text-justify:distribute-all-lines;/*ie6-8*/
              text-align:justify;
            }
            .TextJustify:after{
              content:".";
              display: inline-block;
              width:100%;
              overflow:hidden;
              height:0;
            }
            //手机端 文字截断
            .phoneEllipsis{
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .oneLineEllipsis{
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            //图片放大缩小
            div img{
                display: block;
                position: relative;
                z-index: 1;
                width: 95%;
                top: 50%;
                left: 50%;
                top: 0\9;
                left: 0\9;
                top: 50%\9\0;
                left: 50%\9\0;
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                -moz-transition: width .3s;
                -ms-transition: width .3s;
                -o-transition: width .3s;
                -webkit-transition: width .3s;
                transition: width .3s
            }
            div:hover img{
              width: 105%;
            }
            //图片放大 阴影
            div{
              transition-property: transform;
              transition-duration: .1s;
              transition-timing-function: linear;
              overflow: visible
            }
            div:hover{
              -webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, .2);
              -moz-box-shadow: 0 0 8px 3px rgba(0, 0, 0, .2);
              box-shadow: 0 0 8px 3px rgba(0, 0, 0, .2);
              -webkit-transform: scale(1.03);
              -moz-transform: scale(1.03);
              transform: scale(1.03)
            }
            //图标翻转动画
            a .icon_down {
                -webkit-transition: -webkit-transform 0.1s ease-out;
                -moz-transition: -moz-transform 0.1s ease-out;
                -ms-transition: -ms-transform 0.1s ease-out;
                -o-transition: -o-transform 0.1s ease-out;
            }
            a:hover .icon_down {
                -webkit-transform: rotateZ(180deg);
                -moz-transform: rotateZ(180deg);
                -ms-transform: rotateZ(180deg);
                transform: rotateZ(180deg);
                -o-transform: rotateZ(180deg);
            }
            //禁止选中文本
            .NoSelectText{
              -moz-user-select:none;/*火狐*/
              -webkit-user-select:none;/*webkit浏览器*/
              -ms-user-select:none;/*IE10*/
              -khtml-user-select:none;/*早期浏览器*/
              user-select:none;
            }
            //select 高度兼容
            .select{
              height: 30px;
              line-height: 24px; // ( 30px - 6px )
              font-size: 14px;
            }
            //input 光标居中兼容
            .inputText{
              height: 30px;
              line-height: 16px;
              padding: 5px 3px;
              font-size: 14px;
            }
            // 媒体查询
            @media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
            @media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
            @media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
            @media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
            @media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
            @media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
            @media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
            @media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
            @media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
            @media screen and ( min-width: 639px){/*640px显示屏样式*/}
            @media screen and ( min-width: 640px){/*640px以上显示屏样式*/}

            // background-size 用 background 简写
            background: #f00 url(http://www.w3school.com.cn/i/bg_flower.gif) no-repeat 10px 10px/106px 160px;
            </pre>
        </div>

        <h5><a name="javascript" id="javascript"></a><span>javascript</span></h5>
        <div class="clearfix">
            <pre>
            // keyup 时间数据 按下 900 毫秒 异步请求
            setTimeout(function () {
                var _t = new Date().getTime();
                var _keyT =  _t - keyT;
                if(keyT && (_keyT > 850)){
                    _post();
                }
            },900);
            // 页面设置 多个 window.onload 解决方案  &lt;body onload="fn_onload();"&gt;
            (function () {
              'use strict';
                window._windowOnload = [];
                window.fn_onload = function () {
                  var _windowOnload = window._windowOnload;
                  for (var i = 0; i < _windowOnload.length; i++) {
                     if(typeof _windowOnload[i] == 'function'){
                        setTimeout(_windowOnload[i](),0);
                     }
                  }
                };
                Object.defineProperty(window,"onload",{
                    get: function () {
                      console.log('get');
                    },
                    set: function (val) {
                      if(typeof val == 'function'){
                          _windowOnload.push(val);
                      }
                    },
                    configurable : true
                });

                window.onload = function () {
                  console.log('01');
                };
                window.onload = function () {
                  console.log('02');
                };

            }());
            // 简单时间倒计时
            function fn_timerCountDown(Obj){

                function showTime(Obj) {
                    var T = Obj.T;
                    var dom = Obj.dom;
                    var Ht = Obj.Ht;

                    var day=0,
                        hour=0,
                        minute=0,
                        second=0;

                    day = Math.floor(T / (60 * 60 * 24)) + '';
                    hour = Math.floor(T / (60 * 60)) - (day * 24) + '';
                    minute = Math.floor(T / 60) - (day * 24 * 60) - (hour * 60) + '';
                    second = Math.floor(T) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60) + '';

                    if (hour <= 9) {hour = '0' + hour;}
                    if (minute <= 9) {minute = '0' + minute;}
                    if (second <= 9) {second = '0' + second;}

                    day = '&lt;i&gt;'+day+'&lt;/i&gt;';
                    hour = '&lt;i&gt;'+hour[0]+'&lt;/i&gt;&lt;i&gt;'+hour[1]+'&lt;/i&gt;';
                    minute = '&lt;i&gt;'+minute[0]+'&lt;/i&gt;&lt;i&gt;'+minute[1]+'&lt;/i&gt;';
                    second = '&lt;i&gt;'+second[0]+'&lt;/i&gt;&lt;i&gt;'+second[1]+'&lt;/i&gt;';

                    Ht = Ht.replace(/{dd}/,day);
                    Ht = Ht.replace(/{hh}/,hour);
                    Ht = Ht.replace(/{mm}/,minute);
                    Ht = Ht.replace(/{ss}/,second);
                    document.getElementById(dom).innerHTML = Ht;

                }
                var T = Obj.T;
                var dom = Obj.dom;
                var time=window.setInterval(function(){
                    console.log(T);
                    var day=0,
                        hour=0,
                        minute=0,
                        second=0;
                    if(T > 0){
                        T--;
                        Obj.T = T;
                        showTime(Obj);
                    }else{
                        clearInterval(time);
                        return false;
                    }
                }, 1000);
            }
            fn_timerCountDown({
                T: 666666,
                dom: 'seckillADHt',
                Ht: '&lt;span class="hh"&gt;{hh}&lt;/span&gt;&lt;span class="mm"&gt;{mm}&lt;/span&gt;&lt;span class="ss"&gt;{ss}&lt;/span&gt;'
            });
            // 设置对象 不可枚举 不可编辑 不可配置 属性
            function setEnumF(O,K,V) {
              Object.defineProperty(O,K,{
                  value: V
              });
            }
            // js 类型判断
            var type = function (o){
              var s = Object.prototype.toString.call(o);
              return s.match(/\[object (.*?)\]/)[1].toLowerCase();
            };
            type(''); // string
            type(true); // boolean
            type({}); // "object"
            type([]); // "array"
            type(5); // "number"
            type(null); // "null"
            type(); // "undefined"
            type(/abcd/); // "regex"
            type(new Date()); // "date"

            // 原生js ajax
            window._xhr = {
                _ajax: function (){
                    var arg =  arguments[0];
                    var createxmlHttpRequest = function () {
                        if (window.ActiveXObject) {
                            return new ActiveXObject("Microsoft.XMLHTTP");
                        } else if (window.XMLHttpRequest) {
                            return new XMLHttpRequest();
                        }
                    }
                    var convertData = function (data){
                        if( typeof data === 'object' ){
                            var convertResult = "" ;
                        for(var c in data){
                            convertResult+= c + "=" + data[c] + "&";
                        }
                            convertResult=convertResult.substring(0,convertResult.length-1)
                            return convertResult;
                        }else{
                            return data;
                        }
                    }
                    var _ = {
                        // GET POST
                        type:arg.type || "GET",
                        // url
                        url:arg.url || "",
                        // 异步( 默认 ) 同步
                        async:arg.async || "true",
                        // 提交数据
                        data:arg.data || null,
                        // 返回数据
                        dataType:arg.dataType || "text",
                        // 提交文件头
                        contentType:arg.contentType || "application/x-www-form-urlencoded",
                        // 提交前
                        beforeSend:arg.beforeSend || function () {},
                        // 成功
                        success:arg.success || function () {},
                        // 错误
                        error:arg.error || function () {}
                    }
                    _.beforeSend();
                    var xhr = createxmlHttpRequest();
                    xhr.responseType=_.dataType;
                    xhr.open(_.type,_.url,_.async);
                    xhr.setRequestHeader("Content-Type",_.contentType);
                    xhr.send(convertData(_.data));
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4) {
                            if(xhr.status == 200){
                                _.success(xhr.response)
                            }else{
                                _.error()
                            }
                        }
                    }
                },
                _get: function () {
                    var arg =  arguments[0];
                    this._ajax({
                        type: "GET",
                        url: arg.url,
                        dataType: "json",
                        async: arg.async || "true",
                        beforeSend: arg.beforeSend || null,
                        success: arg.success || null,
                        error:arg.error || null
                    });
                },
                _post: function () {
                    var arg =  arguments[0];
                    this._ajax({
                        type: "POST",
                        url: arg.url,
                        dataType: "json",
                        async: arg.async || "true",
                        data: arg.data || null,
                        beforeSend: arg.beforeSend || null,
                        success: arg.success || null,
                        error:arg.error || null
                    });
                }
            };

            _xhr._get({
                url:'http://h5.quanchepin.com/index.php?act=get_jrtj',
                success:function(msg){
                console.log(msg);
                },
                error:function(){
                console.log("error");
                }
            });
            // cookie 操作
            function setCookie(name,value){
                var Days = 30;
                var exp = new Date();
                exp.setTime(exp.getTime() + Days*24*60*60*1000);
                document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
            }
            function getCookie(name){
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                if(arr=document.cookie.match(reg))
                return unescape(arr[2]);
                else
                return null;
            }
            console.log('cookie: ' + document.cookie);
            // vik_im 自动回复 js
            (function (window,$) {
                // 判断 页面是否获取焦点
                var isblur = true;
                window.onblur = function() {
                    isblur = true;
                    // console.log('onblur' + isblur);
                };
                window.onfocus = function() {
                    isblur = false;
                    // console.log('onfocus' + isblur);
                };
                window.ImExt = {
                    init: function () {
                        try{
                            if(ImExt.sendTextObj){
                                ImExt.sendText(ImExt.sendTextObj);
                            }
                            // 展开陌生人列表
                            // var S = document.getElementById('strangers');
                            // var T = document.getElementById(window.ImExt.to_user);
                            // triggerClick(S);
                            // triggerClick(T);
                        }catch(e){
                        }
                    },
                    im_Notification: function (msg,selectUser) {

                        // 未读消息
                        var IMunread = window.IMunread = {};
                        IMunread[msg.from] = msg;

                        // 页面获取焦点 from  == select
                        var isselect = msg.from == selectUser;
                        // console.log(isblur + '==' + isselect);
                        if(!isblur && isselect){
                            return false;
                        }
                        clearInterval(window.NotificationTime);
                        window.NotificationTime = setInterval(function () {
                            console.log(window.IMunread);
                            var length = 0;
                            for(var i in window.IMunread){
                                length = 1;
                                ImExt.im_Notification(IMunread[i],null);
                            }
                            if(!length){
                                clearInterval(window.NotificationTime);
                            }
                        },10000);

                        var con = typeof msg.data == 'string' ? msg.data : '收到未读消息!';
                        if (window.Notification) {
                            Notification.requestPermission(function (perm) {
                                if (perm == "granted") {
                                    var notify = new Notification(con, {
                                        from: msg.from,
                                        dir: 'auto',
                                        tag: 'msgTag',
                                        renotify: true,
                                        sticky: true,
                                        timestamp: 3600000,
                                        icon: window.baseUrl + '/includes/libraries/images/logo_03.png',
                                        body: '请立即查看.'
                                    });
                                    notify.onshow = function () {
                                        // setTimeout(function(){
                                        //     notify.close();
                                        // }, 3600000);
                                        return false;
                                    };
                                    notify.onclick = function() {
                                        // 未读消息清除
                                        delete IMunread[msg.from];
                                        notify.close();
                                    };
                                }
                            });
                        }
                    },
                    updateOnlineMsg: function(toName) {
                        $.post('index.php?app=common&act=upd_im_online', {to_name: toName}, function(data, textStatus, xhr) {
                            console.log(data);
                        });
                    },
                    triggerClick: function(el) {
                        if (el.click) {
                            el.click();
                        } else {
                            try {
                                var evt = document.createEvent('Event');
                                evt.initEvent('click', true, true);
                                el.dispatchEvent(evt);
                            } catch (e) {
                                console.dir(e);
                            };
                        }
                    },
                    valueDeCode: function (V) {
                        // s = str.replace(/&amp;/g, "&");
                        // s = s.replace(/\n/g, "<br>");

                        // V = V.replace(/&lt;/g,"<");
                        // V = V.replace(/&gt;/g,">");
                        // V = V.replace(/&quot;/g,'"');

                        return V;
                    },
                    addStyle: function () {
                        var nod = document.createElement('style'),
                        str = '.webim-chat{overflow:visible}.webim-chat .replyMsgBox *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.webim-chat .replyMsgBox{position:absolute;left:0;bottom:-51px;width:100%;height:50px;background-color:#fff;box-shadow:rgba(0,0,0,.298039) 0 0 6px 0}.webim-chat .replyMsgBox a{text-decoration:none}.webim-chat .replyMsgBox .selectBox{position:relative;margin-left:10px;margin-top:10px;float:left;width:80px;height:30px;border:1px solid #d6d6d6;line-height:30px;background-color:#fff}.webim-chat .replyMsgBox .selectBox p{padding:0 5px}.webim-chat .replyMsgBox .selectBox ul{position:absolute;left:-1px;top:28px;width:80px;line-height:30px;border:1px solid #d6d6d6;line-height:30px;background-color:#fff;display:none}.webim-chat .replyMsgBox .selectBox ul li{border-top:1px solid #d6d6d6}.webim-chat .replyMsgBox .selectBox ul li a{padding:0 5px;display:block;width:100%;height:100%}.webim-chat .replyMsgBox .selectBox ul li a:hover{background-color:#f5f5f5}.webim-chat .replyMsgBox .selectBox ul li:first-child{border-top:0}.webim-chat .replyMsgBox .selectBox:hover ul{display:block}.webim-avatar-icon{-webkit-filter:inherit}';
                        nod.type='text/css';
                        if(nod.styleSheet){
                            nod.styleSheet.cssText = str;
                        } else {
                            nod.innerHTML = str;
                        }
                        document.querySelector('head').appendChild(nod);
                        // var ht = '&lt;div class="replyMsgBox"&gt;&lt;/div&gt;'
                        var ht = '&lt;div class="selectBox" data-type="0"&gt;&lt;p&gt;&lt;span&gt;不自动回复&lt;/span&gt;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="javascript:;" data-type="1"&gt;自动回复&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="javascript:;" data-type="0"&gt;不自动回复&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;'
                        document.querySelector('.replyMsgBox').innerHTML= ht;

                        $('body').on('click','.selectBox a',function () {
                            var selectBox = $('.replyMsgBox').find('.selectBox');
                            var _this = $(this);
                            var t = _this.text();
                            selectBox.find('span').text(t);
                            var typt = _this.attr('data-type');
                            _this.parents('.selectBox').attr('data-type',typt);
                        });

                    },
                    // 未读消息时间处理
                    unreadMessageDate: function (msg) {
                        var Time = msg.delay || null;
                        var timestamp2;
                        if(Time){
                            // Time = Time.replace(/-/g,'/');
                            Time = Time.replace(/T/g,' ');
                            Time = Time.replace(/.[0-9]{1,}Z/g,'');
                            // var stringTime = "2014-07-10 10:21:12";
                            Time = Date.parse(new Date(Time)) + 28800000;
                            Time = new Date(Time).toLocaleString();
                        }
                        return Time;
                    },
                    // 获取当前日期 时间
                    getNowFormatDate: function () {
                        var date = new Date();
                        var seperator1 = "-";
                        var seperator2 = ":";
                        var month = date.getMonth() + 1;
                        var strDate = date.getDate();
                        if (month >= 1 && month <= 9) {
                            month = "0" + month;
                        }
                        if (strDate >= 0 && strDate <= 9) {
                            strDate = "0" + strDate;
                        }
                        // var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                        //         + " " + date.getHours() + seperator2 + date.getMinutes()
                        //         + seperator2 + date.getSeconds();

                        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
                        return currentdate;
                    },
                    // 时间判断
                    dateJudge02: function () {
                        var type = $('.selectBox').attr('data-type');

                        var is = type == '1';

                        if(is){
                            return true;
                        }else{
                            return false;
                        }
                    },
                    // 时间判断
                    dateJudge: function (t1,t2) {
                        t1 = t1 || '12:30';
                        t2 = t2 || '14:00';
                        // 2014-03-02
                        var _D = window.extFn.getNowFormatDate();

                        var date1 = _D + ' ' + t1;
                        var date2 = _D + ' ' + t2;

                        // 2014-03-02 12:00
                        var oDate1 = new Date(date1);
                        var oDate2 = new Date(date2);
                        var oDate3 = new Date();

                        var D1T = oDate1.getTime();
                        var D2T = oDate2.getTime();
                        var D3T = oDate3.getTime();

                        var is = D3T>D1T && D3T<D2T;

                        if(is){
                            return true;
                        }else{
                            return false;
                        }
                    },
                    // 收到消息调用
                    replyTextMessage: function(msg) {

                        var _this = {};
                        _this.id = msg.id;
                        _this.from = msg.from;
                        _this.to = msg.to;
                        _this.use = msg.ext.name;
                        // 回复消息
                        _this.value = '您好现在有事不在,有事稍后联系.';

                        // var is = window.extFn.dateJudge('14:30','16:30');
                        var is = window.extFn.dateJudge02();

                        if(is){
                            window.extFn.replySendText(_this);
                        }
                    },
                    // 回复文字消息
                    replySendText: function (_this) {

                            value = _this.value || '您好现在有事不在,有事稍后联系.';
                            var chatroom = Demo.selectedCate === 'chatrooms';

                            if(!value){
                                return false;
                            }

                            if (chatroom && Demo.currentChatroom !== Demo.selected) {

                                Notify.error(Demo.lan.notin);
                                return false;
                            }

                            var id = Demo.conn.getUniqueId();
                            var msg = new WebIM.message('txt', id);

                            msg.set({
                                // apiUrl: WebIM.config.apiURL,
                                msg: value,
                                // from: Demo.selected,
                                to: _this.from,
                                ext:{avatar:Demo.avatar1,name:Demo.user1},
                                roomType: chatroom,
                                success: function success(id) {
                                    Demo.api.appendMsg(msg.body,'txt');
                                },
                                error: function () {
                                    console.log(arguments);
                                }
                            });

                            Demo.conn.send(msg.body);

                            // if (Demo.selectedCate === 'groups') {
                            //     msg.setGroup(Demo.groupType);
                            // } else if (chatroom) {
                            //     msg.setGroup(Demo.groupType);
                            // }
                    },
                    // 发送消息
                    sendText: function (_this) {

                            var chatroom = Demo.selectedCate === 'chatrooms';

                            if (chatroom && Demo.currentChatroom !== Demo.selected) {

                                Notify.error(Demo.lan.notin);
                                return false;
                            }

                            var id = Demo.conn.getUniqueId();
                            var msg = new WebIM.message('txt', id);

                            msg.set({
                                msg: _this.value,
                                to: _this.to,
                                ext:{avatar:Demo.avatar1,name:Demo.user1},
                                roomType: chatroom,
                                success: function success(id) {
                                    // Demo.api.appendMsg(msg.body,'txt');
                                },
                                error: function () {
                                    console.log(arguments);
                                }
                            });

                            Demo.api.appendMsg(msg.body,'txt');
                            Demo.conn.send(msg.body);

                    }
                };
            }(window,jQuery));

            // 桌面提醒
            _showDataDesktop: function (data) {
              if (window.Notification) {
                  var popNotice = function() {
                      if (Notification.permission == "granted") {
                          var notification = new Notification(data.tit, {
                              body: data.body,
                              icon: data.icon
                          });

                          notification.onclick = function() {
                              notification.close();
                          };
                      }
                  };

                  if (Notification.permission == "granted") {
                      popNotice();
                  } else if (Notification.permission != "denied") {
                      Notification.requestPermission(function (permission) {
                        popNotice();
                      });
                  }
              } else {
                  console.log('浏览器不支持Notification');
              }
            }

            // $.fn.fn_timerCountDown 倒计时插件
            ;!(function (window,$,undefined) {
                // 倒计时
                function fn_timerCountDown(Obj) {
                  var _this = {};
                  var o = {
                      Obj: '#timeStrBox',
                      intDiff: $('#timeStrBox').attr('data-time'),
                      timeStrDist: $('#timeStrBox').find('.timeStr')
                  };
                  _this.O = $.extend(o,Obj);

                  fn_init(_this);
                  return _this;
                }
                // 倒计时
                function fn_init(_this){
                    var intDiff = Number(_this.O.intDiff);
                    var Obj = _this.O.Obj;
                    var timeStrDist = _this.O.timeStrDist;

                    _this.time = window.setInterval(function(){
                    var day=0,
                      hour=0,
                      minute=0,
                      second=0;
                    if(intDiff > 0){
                      day = Math.floor(intDiff / (60 * 60 * 24));
                      hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                      minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                      second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }else{
                      $(timeStrDist).html('剩余00秒');
                      clearInterval(_this.time);
                      return false;
                    }
                    if (minute <= 9) {minute = '0' + minute;}
                    if (second <= 9) {second = '0' + second;}

                    var str='剩余';
                    if(day>0){
                      str+=day+"天"+hour+'时'+minute+'分'+second+'秒';
                    }else if(hour>0){
                      str+=hour+'时'+minute+'分'+second+'秒';
                    }else if(minute>0){
                      str+=minute+'分'+second+'秒';
                    }else if(second>0){
                      str+=second+'秒';
                    }
                    $(timeStrDist).html(str);
                    intDiff--;
                    return str;
                    }, 1000);
                }

                // 插件绑定
                $.fn.fn_timerCountDown = fn_timerCountDown;
            })(window,jQuery);

            // 创建 style 节点
            function set_fontFamily() {
              var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
              var ht;
              if(isMac){
                ht = 'body,button,input,select,option,textarea{font-family: Hiragino Sans GB,sans-serif !important;}';
              }else{
                ht = 'body,button,input,select,option,textarea{font-family: "Microsoft YaHei",Arial,sans-serif!important;-moz-osx-font--webkit-font-smoothing: antialiased !important;}';
              }
                var nod = document.createElement("style");
                nod.type="text/css";
                if(nod.styleSheet){
                    nod.styleSheet.cssText = ht;
                } else {
                    nod.innerHTML = ht;
                }
                document.getElementsByTagName("head")[0].appendChild(nod);
            }

            // pc端 自定义 title样式
            #titleTips{
              padding: 6px;
              position: fixed;
              width: 300px;
              background: @colorfff;
              border:1px solid @colorGrey54;
              // border-radius:3px;
              font-size: 12px;
              z-index: 100;
              color: @color666;
              box-shadow: 0 0 4px @tipTitleShadow;
              i{
                  position: absolute;
                  display: block;
                  left: 50%;
                  margin-left: -9px;
                  top: -6px;
                  width: 9px;
                  height: 6px;
                  background: @explainUp01;
              }
            }
            $(".tipTitle").on("mouseover",function(){
              if($("#titleTips").length!=1){
                  $('body').append('&lt;div id="titleTips"&gt;&lt;i&gt;&lt;/i&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;');
              }
              //获取选中元素的私有属性值
              var popValue = $(this).attr("data-title");
              //获取元素左边距到窗口左边缘的距离
              var xAxis = $(this).offset().left;
              //获取元素上边距到窗口顶端的距离（这里减去了滚动条滚动的距离）
              var yAxis = $(this).offset().top-$(document).scrollTop();
              //获取当前元素的宽度与高度
              var domWidth = $(this).width();
              var domHeight = $(this).height();
              //计算要显示字符的字母个数（显示的框框要根据字符数自动设置宽度）
              var fontNumber = popValue.length;
              //设置每个字符所占据的像素长度
              var widthForSingleAlpha = 14;
              //鼠标移入的时候显示提示框。
              $("#titleTips").show();

              // 设置到顶端的距离
              $("#titleTips").css("top",(yAxis+domHeight+6)+"px");
              var smallTipsWidth = $("#titleTips").width();/*获取弹框的宽度*/
              $("#titleTips").css("left",xAxis+domWidth/2-smallTipsWidth/2);/*根据弹框的宽度设置其到左端的距离*/
              $("#titleTips>span").html(popValue);/*设置显示的文字内容*/
            });
            $(".tipTitle").on("mouseout",function(){
              $("#titleTips").hide();
            });
            // 判断 Mac 终端
            isMac = /macintosh|mac os x/i.test(navigator.userAgent);
            // 判断 Windows 终端
            isWindows = /windows|win32/i.test(navigator.userAgent);
            // 判断 Linux 终端
            isLinux  = /linux/i.test(navigator.userAgent);
            // 判断 android 终端
            isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
            // 判断 ios 终端
            isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            //判断 ie
            var browser=navigator.appName
            var b_version=navigator.appVersion
            var version=b_version.split(";");
            var trim_Version=version[1].replace(/[ ]/g,"");
            if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
            alert("IE 6.0");
            } else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
            alert("IE 7.0");
            } else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
            alert("IE 8.0");
            } else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
            alert("IE 9.0");
            }
            //js 获取get 参数
            function fn_get(name){
               var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
               var r = window.location.search.substr(1).match(reg);
               if(r!=null){
                  return  unescape(r[2]);
               }
               return null;
            }

            //form 禁止回车表单自动提交事件
            function fn_Key13() {
              var f = document.getElementsByTagName("form");
              for (var i = f.length - 1; i >= 0; i--) {
                  f[i].onkeydown=function (event) {
                      var e = event ? event : window.event;
                      var c = Number(e.keyCode);
                      console.log(c);
                      if(c==13){
                          return false;
                      }
                  }
              }
            }
            fn_Key13();
            /**
            * 是否为mac系统
            * */
            var isMac = function() {
                  return /macintosh|mac os x/i.test(navigator.userAgent);
            }();
            /**
            * 是否为windows系统
            * */
            var isWindows = function() {
                  return /windows|win32/i.test(navigator.userAgent);
            }();
            //jq 插件模板
            (function (w,$,undefined) {
              var _this = {
                  O : {
                      name : "name",
                      id : "id",
                      cla : "cla"
                  },
                  loadJs : function (U) {
                      var script = document.createElement("script");
                      script.type = "text/javascript";
                      script.src = U;
                      document.body.appendChild(script);
                  },
                  loadCss : function (U) {
                      var link = document.createElement("link");
                      link.type = "text/css";
                      link.rel = "stylesheet";
                      link.href = U;
                      document.getElementsByTagName("head")[0].appendChild(link);
                  },
                  loadImg : function (U,fn) {
                      this._.img = new Image();
                      this._.img.src = U;

                      this._.img.onload = fn || function () {
                          console.log(this._.img);
                      }
                  },
                  init : function (O,_jk) {
                      this.O = $.extend(this.O,O);
                      this._ = _jk;
                      $(this.O.id).on('click',this.O.cla, function(event) {
                          event.preventDefault();
                          console.log($(this).text());
                      });
                  },
                  sayN : function () {
                      console.log(this.O.name);
                  },
                  sayId : function () {
                      console.log(this.O.id);
                  }
              };
              var _jk = {
                  init : function (O) {
                      _this.init(O,this);
                  },
                  sayN : function () {
                      _this.sayN();
                  },
                  sayId : function () {
                      _this.sayId();
                  },
                  loadJs : function (U) {
                      _this.loadJs(U);
                  },
                  loadCss : function (U) {
                      _this.loadCss(U);
                  },
                  loadImg : function (U,fn) {
                      _this.loadImg(U,fn);
                  }
              };
              w._jk = _jk;
            }(window,jQuery));


            _jk.init({
              name: "jk_name",
              id : "#div01",
              cla : ".next"

            });
            _jk.sayN();
            _jk.sayId();
            _jk.loadImg("https://www.baidu.com/img/bd_logo1.png",function () {
              $("body").append(_jk.img);
            });
            //设置 iframe 高度
            function set_iframeH(str) {
              var f = document.getElementById(str);
              f.Win = f.contentWindow || f.contentDocument.parentWindow;
              f.height = f.Win.document.documentElement.scrollHeight || f.Win.document.body.scrollHeight;
            }

            // 返回上一个页面
            self.location=document.referrer;
            history.back(-1);location.reload(); // 有兼容问题
            history.go(-1);location.reload();   // 有兼容问题
            //beforeunload 兼容性
            ie8 &lt;a href="javascript:;"&gt;&lt;/a&gt; javascript:;伪协议会触发beforeunload事件

            //layer 显示图片
            layer.open({
                type: 1,
                title: false,
                offset: 'auto',
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                area: ['auto', 'auto'],
                fix: true,
                shade: 0.3,
                shadeClose: true, //开启遮罩关闭
                content: '&lt;img class="layerShowImgBox" src=""/&gt;'
            });
            //捕获页 弹框配置
            layer.open({
              type: 1,
              skin: 'layui-layer-rim',
              area: ['auto', 'auto'],
              shade: 0.35,
              fix: true,
              scrollbar: false,
              title: '全车品登录', //不显示标题
              content: $('#loginHideBox') //捕获的元素
            });

            // 设置滚动条位置
            function fn_scrollTop(Obj) {
                var T = $(Obj).offset().top;
                $("html,body").scrollTop(T);
            }
            /**
            *jackdizhu 瀑布流 小插件
            *Box:"#liBox" 最外层容器
            *Li:".li"     列表元素
            *Margin:10       列表之间的间距 margin-left or margin-right
            *_this=this   调用this 用_this代替
            */
            ;!(function (window,$,undefined) {
              window.waterfallFlow=function(options) {
                  var _default={
                      Box:"#liBox",
                      Li:".li",
                      Margin:10
                  };
                  var _options = $.extend({},_default,options);
                  var Liobj=$(_options.Li),
                      BoxObj=$(_options.Box);
                  var LiWidth = Liobj[0].offsetWidth+_options.Margin;
                  var BoxWidth=BoxObj[0].offsetWidth+_options.Margin;
                  function fn_setLiBox(){
                      var H=[];                                                   //记录高度的数组
                      var N = BoxWidth/LiWidth|0;
                      var Max_H,MinKey,Max,Li_H;
                      for(var i = 0;i < Liobj.length;i++) {
                          Li_H = Liobj[i].offsetHeight;                     //获取每个Li的高度
                          if(i < N) {                                             //N是一行最多的Li，小于n就是第一行
                              Max_H =Math.max.apply(null,H);
                              H[i]=Li_H;                                          //把每个Li放到数组里面
                              Liobj.eq(i).css("top",0);                     //第一行Li的top值为0
                              Liobj.eq(i).css("left",i * LiWidth);          //第i个Li的左坐标就是i*li的宽度
                              }
                          else{
                              min_H =Math.min.apply(null,H) ;                     //取得数组中的最小值 ，高度值最小
                              MinKey = fn_getarraykey(H, min_H);                     //最小的值对应的key
                              H[MinKey] += Li_H;                 //加上新高度后 更新高度值
                              Liobj.eq(i).css("top",min_H); //先得到高度最小的Li，然后把接下来的li放到它的下面
                              Liobj.eq(i).css("left",MinKey * LiWidth);     //第i个li的左坐标就是i*li的宽度
                          }
                      }
                      Max =Math.max.apply(null,H) ;
                      BoxObj.css("height",Max);
                  }
                  /* 使用for in运算返回数组中某一值的对应项数(计算出最小的高度值是数组里面的第几个) */
                  function fn_getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
                  /*一定要用onload，如果有图片不加载完就不知道高度值*/
                  window.onload = function() {fn_setLiBox();};
              }
            })(window,jQuery)
            /**
            *jackdizhu a锚点动画 小插件
            *A:'a'        a标签元素
            *_this=this   调用this 用_this代替
            */
            ;!(function (window,$,undefined) {
              window.anchorAnimation=function(options) {
                  var _default={
                      A:'a',
                      aTime:1000,
                      Fn_Click:null,
                      Fn_Callback:null
                  };
                  var _options = $.extend({},_default,options);
                  var aObj=$(_options.A);
                  var Href,id;
                  var rel=/#[A-Za-z0-9_]+/;
                  // 获取元素 绑定点击事件
                  $(_options.A).on('click', function(event) {
                      event.preventDefault();
                      event.stopPropagation();
                      Href=this.href;
                      id=rel.exec(Href);
                      if(id.length){
                          fn_GoAnimation(id[0]);
                          if(typeof _options.Fn_Click == 'function'){
                              var _this=this;
                              _options.Fn_Click(_this);
                          }
                      }
                      return false;
                  });
                  // 执行滚动动画
                  function fn_GoAnimation(id) {
                      var Ojb=$(id);
                      var scT=Ojb.offset().top;
                      // 防止回调重复执行
                      Ojb.attr({
                          'data-animate': 'true'
                      });
                      $('html,body').animate({
                          scrollTop:scT
                      },_options.aTime,function () {
                          if(typeof _options.Fn_Callback == 'function'){
                              var _this=this;
                              if(Ojb.attr('data-animate')=='true'){
                                  Ojb.attr({
                                      'data-animate': 'false'
                                  });
                                  _options.Fn_Callback(_this);
                              }
                          }
                      });
                  }
              }
            })(window,jQuery);

            //new Date 参数形式：如：
            new Date("January 12,2006 22:19:35");
            new Date("January 12,2006");
            new Date(2006,0,12,22,19,35);
            new Date(2006,0,12);
            new Date(1137075575000);

            //根据邮箱后缀 跳转登录页面
            function fn_get_emailLogin(){
                var hash = {
                    'qq.com': 'http://mail.qq.com',
                    'gmail.com': 'http://mail.google.com',
                    'sina.com': 'http://mail.sina.com.cn',
                    '163.com': 'http://mail.163.com',
                    '126.com': 'http://mail.126.com',
                    'yeah.net': 'http://www.yeah.net/',
                    'sohu.com': 'http://mail.sohu.com/',
                    'tom.com': 'http://mail.tom.com/',
                    'sogou.com': 'http://mail.sogou.com/',
                    '139.com': 'http://mail.10086.cn/',
                    'hotmail.com': 'http://www.hotmail.com',
                    'live.com': 'http://login.live.com/',
                    'live.cn': 'http://login.live.cn/',
                    'live.com.cn': 'http://login.live.com.cn',
                    '189.com': 'http://webmail16.189.cn/webmail/',
                    'yahoo.com.cn': 'http://mail.cn.yahoo.com/',
                    'yahoo.cn': 'http://mail.cn.yahoo.com/',
                    'eyou.com': 'http://www.eyou.com/',
                    '21cn.com': 'http://mail.21cn.com/',
                    '188.com': 'http://www.188.com/',
                    'foxmail.com': 'http://www.foxmail.com',
                    'outlook.com': 'http://www.outlook.com'
                }
                var _mail = $("input[type=email]").val().split('@')[1];  //获取邮箱域名
                for (var j in hash){
                    if(j == _mail){
                        return hash[_mail];
                    }
                }
                return false;
            }
            //简单图片切换
            function fn_slide(Obj,n,top) {
              if(top=='top'){
                  var interval1 = $(Obj).find("li:first-child").outerHeight();
                  var mar='marginTop';
              }else{
                  var interval1 = $(Obj).find("li:first-child").outerWidth();
                  var mar='marginLeft';
              }
              var leng=$(Obj).find("li").length+1;
              $(Obj).find("ul").css({width:interval1*(leng-1)+'px'});
              var count1 = leng - n-1; /* 显示 5 个 li标签内容 */
              var curIndex1 = 0;

              $(Obj).find("a").on('click',function(){
                  $(Obj).find("a").removeClass('disabled');
                  if (curIndex1 == 0){$(Obj).parent().find('.prev').addClass('disabled');}
                  if (curIndex1 >= count1){$(Obj).parent().find('.next').addClass('disabled');}
                  if( $(this).hasClass('disabled') ){return false;}
                  if ($(this).hasClass('prev')){--curIndex1;}
                  else{++curIndex1;}
                  if(mar=='marginTop'){
                      $(Obj).find("ul").stop(false, true).animate({marginTop: -curIndex1*interval1 + "px"}, 600);
                  }else{
                      $(Obj).find("ul").stop(false, true).animate({marginLeft: -curIndex1*interval1 + "px"}, 600);
                  }
              });
            }

            //IScroll 多个div 调用 点击事件 配置
            $('.wrapper').each(function() {
                var myscroll;
                var id='#'+$(this).attr('id');
                function loaded(){
                  myscroll=new IScroll(id,{
                      momentum:false,
                      hScrollbar:false,
                      hideScrollbar:false,
                      vScroll:true,
                      scrollbars: 'custom',
                      click: true,
                      preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|P)$/},
                      preventDefault:false
                  });
                }
                function set_hide() {
                  $(id).css({visibility:'visible',display:'none'});
                }
                loaded();
                set_hide();
            });

            //阻止浏览器默认行为
            event.preventDefault();
            //阻止浏览器往下派发事件
            event.stopPropagation();
            //判断事件是否是起泡事件类型
            console.log(event.bubbles);
            //判断事件是否可拥可取消的默认动作
            console.log(event.cancelable);

            //事件绑定
            function eventBinding(obj,type,handle){
                if(obj.addEventListener){
                //非ie
                  obj.addEventListener(type,handle,false);
                }else if(obj.attachEvent){
                //ie
                  obj.attachEvent('on' + type,handle);
                }else{obj['on' + type] = handle;}
            }
            //手机拖动事件
            $(function() {
                var startX, startY, endX, endY;
                document.getElementById("shoplist").addEventListener("touchstart", touchStart, false);
                document.getElementById("shoplist").addEventListener("touchmove", touchMove, false);
                document.getElementById("shoplist").addEventListener("touchend", touchEnd, false);
                function touchStart(event) {
                    var touch = event.touches[0];
                    startY = touch.pageY;
                }
                function touchMove(event) {
                    var touch = event.touches[0];
                    endY = (startY - touch.pageY);
                }
                function touchEnd(event) {
                  if(endY>100){
                    //加载更多
                    $(".loadMore").click();
                  }
                }
            });
            // 停止body页面滚动
            function stopTouchMove(e) {
                bodyScollTop=$('body').scrollTop();
                $("body,html").css({"overflow":"hidden"});
                return false;
            }
            // 开始页面滚动
            function startTouchMove(e) {
                $('body').scrollTop(bodyScollTop);
                $("body,html").css({"overflow":"auto"});
                return false;
            }

            //多行文字两端对齐
            $("#CompanyIntroduction p").css({'textalign':'justify','letter-spacing':'-.15em'});
            var text = $("#CompanyIntroduction p").html().split("").join(" ").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " &nbsp; ");//添加空格 处理3个空格情况
            $("#CompanyIntroduction p").html(text);
            //文字两端对齐方法
            function fn_TextJustify(Obj) {
                var t=$(Obj).addClass('.TextJustify').text();
                // 手机端
                // $(Obj).css({'letter-spacing':'-.15em'});
                // var t2=t.html().split("").join(" ").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " &nbsp; ");
                // pc端
                var t2=t.split("").join(" ");
                $(Obj).html(t2).attr('data-text',t);
            }
            //处理3个空格情况
            box.innerHTML = box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " &nbsp; ")
            //多行文字超出隐藏
            $("#CompanyIntroduction").each(function(i){
                var divH = $(this).height();
                var $p = $("p", $(this)).eq(0);
                while ($p.outerHeight() > divH) {
                  $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
                };
            });
            </pre>
        </div>

        <h5><a name="IE_Notes" id="IE_Notes"></a><span>IE 注释</span></h5>

        <div class="clearfix">
            <p>
              <!--[if IE 6]>
              只有IE6版本可见
              <![endif]-->
              <!--[if lte IE 6]>
              IE6及其以下版本可见
              <![endif]-->
              <!--[if gte IE 6]>
              IE6及其以上版本可见
              <![endif]-->
              <!--[if IE 7]>
              只有IE7版本可见
              <![endif]-->
              <!--[if lte IE 7]>
              IE7及其以下版本可见
              <![endif]-->
              <!--[if gte IE 7]>
              IE7及其以上的版本可见
              <![endif]-->
              <!--[if IE 8]>
              只有IE8版本可见
              <![endif]-->
              <!--[if lte IE 8]>
              IE8及其以下的版本可见
              <![endif]-->
              <!--[if gte IE 8]>
              IE8及其以上的版本可见
              <![endif]-->
              <![if !IE]>
              除了IE以外的版本
              <![endif]>
            </p>
        </div>
        <div class="clearfix">
            <pre>
            &lt;!--[if IE 6]&gt;
            只有IE6版本可见
            &lt;![endif]--&gt;
            &lt;!--[if lte IE 6]&gt;
            IE6及其以下版本可见
            &lt;![endif]--&gt;
            &lt;!--[if gte IE 6]&gt;
            IE6及其以上版本可见
            &lt;![endif]--&gt;
            &lt;!--[if IE 7]&gt;
            只有IE7版本可见
            &lt;![endif]--&gt;
            &lt;!--[if lte IE 7]&gt;
            IE7及其以下版本可见
            &lt;![endif]--&gt;
            &lt;!--[if gte IE 7]&gt;
            IE7及其以上的版本可见
            &lt;![endif]--&gt;
            &lt;!--[if IE 8]&gt;
            只有IE8版本可见
            &lt;![endif]--&gt;
            &lt;!--[if lte IE 8]&gt;
            IE8及其以下的版本可见
            &lt;![endif]--&gt;
            &lt;!--[if gte IE 8]&gt;
            IE8及其以上的版本可见
            &lt;![endif]--&gt;
            &lt;![if !IE]&gt;
            除了IE以外的版本
            &lt;![endif]&gt;
            </pre>
        </div>

        <h5><a name="Browser" id="Browser"></a><span>火狐 浏览器 页面比例显示不正常 问题</span></h5>
        <div class="clearfix">
            <pre>
            //关于 火狐 浏览器 页面比例不正常问题 (屏幕的像素比)
            layout.css.devPixelsPerPx 值 改为 1
            //火狐 RemoteLiveReload liveReload 插件
            //谷歌 LiveReload       liveReload 插件
            //sublime  LiveReload   liveReload 插件
            //liveReload 插件配置 (文件修改-浏览器自动刷新)
            {
              "enabled_plugins": [
                "SimpleReloadPlugin",
                "SimpleRefresh"
              ]
            }
            </pre>
        </div>

        <h5><a name="sublime_config" id="sublime_config"></a><span>sublime配置</span></h5>
        <div class="clearfix">
            <pre>
            //用户配置
            {
              "always_show_minimap_viewport": true,
              "auto_complete": true,
              "auto_match_enabled": true,
              "color_scheme": "Packages/Color Scheme - Default/Solarized (Light).tmTheme",
              "default_encoding": "UTF-8",
              "default_line_ending": "Unix",
              "dpi_scale": 1.0,
              "ensure_newline_at_eof_on_save": true,
              "fade_fold_buttons": true,
              "fold_buttons": true,
              "font_face": "Consolas",
              "font_size": 12,
              "highlight_line": true,
              "ignored_packages":
              [
                "Vintage"
              ],
              "show_encoding": true,
              "show_line_endings": true,
              "tab_size": 2,
              "translate_tabs_to_spaces": true,
              "trim_trailing_white_space_on_save": true,
              "update_check": false
            }
            </pre>
        </div>

        <h5><a name="PHP" id="PHP"></a><span>php_给文件加MD5</span></h5>
        <div class="clearfix">
            <pre>
            // MD5
            // $filename = "./includes/libraries/javascript/base.css";
            function code6($url){
              $result = sprintf("%u",crc32($url));
              $code = '';
              while($result  >0){
                $s = $result % 62;
                if($s > 35){
                    $s=chr($s+61);
                }elseif($s>9 && $s<=35){
                    $s=chr($s+55);
                }
                $code .= $s;
                $result = floor($result / 62);
              }
              return $code;
            }
            $url = $_GET["file"];
            // $md5file = md5_file($url);
            $md5file = md5_file($url);
            $arr = explode('/',$url);
            $filename= $arr[count($arr)-1];
            $short = code6($md5file);
            $filename1 = str_replace(".",'.'.$md5file.'.',$filename);
            $filename2 = str_replace(".",'.'.$short.'.',$filename);
            echo $filename1."&lt;br/&gt;";
            echo $filename2."&lt;br/&gt;";
            </pre>
        </div>

    </div>

    <script type="text/javascript" src="./dist/index.js"></script>
</body>
</html>
